<script setup>
import { ref, onMounted, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { useAttractionApi } from '@/api/attraction/index'
import { useFavoriteApi } from '@/api/favorite/index'

const router = useRouter()
// 模拟景点数据
const attractions = ref([])

const state = reactive({
  searchParams: {
    name: ''
  }
})

const attractionApi = useAttractionApi()
const favoriteApi = useFavoriteApi()

// 加载景点数据
const loadAttractions = async () => {
  const res = await attractionApi.getList(state.searchParams)
  attractions.value = res || []
}

// 查看详情
const handleDetail = (item) => {
  router.push({
    name: 'AttractionDetail',
    params: {
      id: item.id
    }
  })
}

// 收藏景点
const handleCollect = async (item) => {
  if (item.isFavorite) {
    await favoriteApi.cancel(item.id)
    item.isFavorite = false
    ElMessage.success('已取消收藏')
    // 更新计数
    item.favoriteCount--
  } else {
    await favoriteApi.save({ attractionId: item.id })
    item.isFavorite = true
    ElMessage.success('收藏成功')
    // 更新计数
    item.favoriteCount++
  }
}

onMounted(async () => {
  await loadAttractions()
})
</script>

<template>
  <el-card shadow="never">
    <el-form :inline="true">
      <el-form-item>
        <el-input v-model="state.searchParams.name" placeholder="请输入景点名称进行搜索" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="search" @click="loadAttractions">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10">
      <template v-for="item in attractions" :key="item.id">
        <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="4">
          <el-card :body-style="{ padding: '0' }" shadow="never">
            <!-- 图片区域 -->
            <div class="image-container">
              <el-image
                class="attraction-image"
                :src="item.imageUrl"
                :preview-src-list="[item.imageUrl]"
                :preview-teleported="true"
                fit="cover"
                loading="lazy"
              />
            </div>
            <!-- 内容区域 -->
            <div class="content-container">
              <div class="content-header">
                <h3 class="attraction-name">{{ item.name }}</h3>
                <div class="interaction-count">
                  <span class="favorite-count">
                    <el-icon><Star /></el-icon> {{ item.favoriteCount }}
                  </span>
                  <span class="comment-count">
                    <el-icon><Comment /></el-icon> {{ item.commentCount }}
                  </span>
                </div>
              </div>
              <div class="content-body">
                <p class="address">
                  <el-icon><Location /></el-icon> <span>{{ item.address }}</span>
                </p>
                <p class="description">{{ item.description }}</p>
              </div>
            </div>
            <!-- 操作按钮 -->
            <div class="action-container">
              <el-button type="primary" class="detail-btn" @click="handleDetail(item)">
                <el-icon><View /></el-icon> 查看详情
              </el-button>
              <el-button
                :type="item.isFavorite ? 'danger' : 'success'"
                class="favorite-btn"
                @click="handleCollect(item)"
              >
                <el-icon><Star /></el-icon> {{ item.isFavorite ? '已收藏' : '收藏' }}
              </el-button>
            </div>
          </el-card>
        </el-col>
      </template>
    </el-row>

    <el-empty description="暂无匹配景点" v-if="attractions.length === 0" />
  </el-card>
</template>

<style scoped lang="scss">
.image-container {
  height: 160px;
  overflow: hidden;
  .attraction-image {
    width: 100%;
    height: 100%;
    transition: transform 0.5s;
    &:hover {
      transform: scale(1.05);
    }
  }
}
.content-container {
  padding: 15px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  .attraction-name {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 70%;
  }
  .interaction-count {
    display: flex;
    gap: 10px;
    font-size: 12px;
    color: #999;
    .favorite-count {
      display: flex;
      align-items: center;
    }
    .comment-count {
      display: flex;
      align-items: center;
    }
  }
}
.content-body {
  flex: 1;
  .address {
    margin: 0 0 10px 0;
    font-size: 13px;
    color: #666;
    display: flex;
    align-items: center;
    .el-icon {
      margin-right: 5px;
    }
  }
  .description {
    margin: 0;
    font-size: 14px;
    color: #666;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5;
  }
}
.action-container {
  padding: 0 15px 15px;
  display: flex;
  gap: 10px;
  .el-button {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
